<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件嵌套</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
</div>

<script>
  Vue.config.productionTip = false;
  Vue.config.devtools = true;


  const hello = Vue.extend({
    data() {
      return {
        hello: '你好'
      }
    },
    template: `
          <div>
          <h1>{{ hello }}</h1>
          </div>
        `
  });

  const student = Vue.extend({
    //注意不要配置el 组件不会对单独的容器使用
    data() {
      return {
        studentName: '张三',
        age: 18
      }
    },
    //定义组件的时候要定义使用模板 要用模板字符串 主要模板的最外面要加 div标签
    template: `
          <div>
          <h2>学生名字:{{ studentName }}</h2>
          <h2>学生年龄:{{ age }}</h2>
          </div>
        `
  });

  //定义组件 传入的对象和new Vue()中的对象差不多
  const school = Vue.extend({
    //注意不要配置el 组件不会对单独的容器使用 而且这里的data要用函数式 作用:一个页面对其数据的修改 不会影响到其他的页面
    data() {
      return {
        schoolName: '尚硅谷',
        address: '北京昌平'
      }
    },
    //定义组件的时候要定义使用模板 要用模板字符串 主要模板的最外面要加 div标签
    template: `
          <div>
          <h2>学校名称:{{ schoolName }}</h2>
          <h2>学校地址:{{ address }}</h2>
          <student></student>
          </div>
        `,
    components:{
      student
    }
  });


  // 真实的开发场景中会定义这个app
  const app = Vue.extend({
    template:`
      <div>
      <hello></hello>
      <school></school>
      </div>
    `,
    components:{
      hello,
      school
    }
  });

  //注册组件(局部注册)
  new Vue({
    template:`
      <app></app>
    `,
    el: '#root',
    components: {
      // 组件的真实名字 组件的对象
      app
    }
  });


</script>
</body>
</html>